/**
 * @fileName webpack.config.js
 * @date 2022/2/8 9:51
 * @author yyx219
 * @email yyx219@qq.com
 * @github https://github.com/yyx219
 * @gitee https://gitee.com/yyx219
 * @PrivateNpm http://npm.hzbiz.net/
 */
"use strict"
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
module.exports = {
    entry: './src/index.js',
    devServer: {     //开发服务器的配置
        port: 3000,  //端口
        static: './public',    //以这个目录作为静态服务
        open: true,   //打包完成自动打开浏览器
        compress: false   //启用压缩
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
    resolve: {
        modules: ["node_modules"],
        alias: {
            "@": path.resolve(__dirname, './src')
        },
        extensions: [".js", ".json", ".vue", ".scss",".svg"]
    },
    module: {
        rules: [
            {
                test: /\.txt$/,
                use: ['raw-loader']
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192
                        }
                    }
                ]
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            // 它会应用到普通的 `.js` 文件
            // 以及 `.vue` 文件中的 `<script>` 块
            {
                test: /\.js$/,
                loader: 'babel-loader'
            },
            // 它会应用到普通的 `.css` 文件
            // 以及 `.vue` 文件中的 `<style>` 块
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    'postcss-loader'
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    },
    plugins:[
        new MiniCssExtractPlugin({
            filename: 'css/[name].css' //css打包输出出口及文件名称
        }),
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template:"./public/index.html",
            filename:"index.html"
        }),
        new webpack.ProvidePlugin({
            $:"jquery",
            jQuery:"jquery",
            "window.jQuery":"jquery"
        })
    ],
    mode : 'development',   // development为开发者环境，production为生产环境变量 ，还有一个为none
};
